<template>
  <div>
    <p-card :bordered="false">
      <p-row>
        <p-col :span="8">
          <p-input-search
            placeholder="请输入SN/PN"
            style="width: 200px"
            @search="onSearch"
          />
          <p-divider type="vertical" />
          <!-- 高级查询按钮 -->
          <j-super-query
            :fieldList="fieldList"
            ref="superQueryModal"
            @handleSuperQuery="handleSuperQuery"
          ></j-super-query>
        </p-col>

        <p-col
          :span="8"
          class="table-operator"
        >
          <mes-order-online-maintenance-list-modal ref="reference" />
          <p-button
            @click="handleAdd"
            type="primary"
            :span='6'
            icon="plus"
          >新增</p-button>
          <p-button
            type="primary"
            :span='6'
          >编辑</p-button>
          <p-button
            @click="SendATransfer"
            type="primary"
            :span='6'
          >送修交接</p-button>
          <p-button
            type="primary"
            :span='6'
          >良品交接</p-button>
          <p-popconfirm
            title="确定删除吗?"
            @confirm="confirmDelet"
          >
            <p-button
              type="danger"
              v-show="active"
            >删除</p-button>
          </p-popconfirm>
        </p-col>
      </p-row>
    </p-card>
    <!-- 按钮操作-END -->
    <span
      style="margin-left:10px;"
      @click="btnClick($event)"
    >
      <label>单据状态: </label>
      <p-button :style="active?show:hide">送修中</p-button>
      <p-button>待维修</p-button>
      <p-button>维修完成</p-button>
      <p-button>关闭</p-button>
    </span>
    <div
      class="poros-alert poros-alert-info"
      style="margin-bottom: 16px;margin-top:10px;"
    >
      <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
      <a
        style="margin-left: 24px"
        @click="onClearSelected"
      >清空</a>

      <span style="float:right;">
        <a @click="getlist()">
          <p-icon type="sync" />刷新
        </a>
        <p-divider type="vertical" />
        <p-popover
          title="自定义列"
          trigger="click"
          placement="leftBottom"
          :overlay-style="getWidth"
        >
          <template slot="content">
            <p-checkbox-group
              @change="onColSettingsChange"
              v-model="settingColumns"
              :defaultValue="settingColumns"
            >
              <p-row>
                <template v-for="item in defColumns">
                  <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                    <p-col :span="12">
                      <p-checkbox :value="item.dataIndex">{{ item.title }}</p-checkbox>
                    </p-col>
                  </template>
                </template>
              </p-row>
            </p-checkbox-group>
          </template>
          <a>
            <p-icon type="setting" />自定义列
          </a>
        </p-popover>
      </span>
    </div>

    <!-- table-begin -->
    <p-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :rowKey="rowKey"
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :bordered="bordered"
      :pagination="getlistformdata"
    />
  </div>
</template>
<script>
import Vue from "vue";
import JSuperQuery from "@/components/jeecg/JSuperQuery.vue";
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";
import MesHrTrainPathListVue from "./MesHrTrainPathList.vue";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import MesOrderOnlineMaintenanceListModal from "./modules/MesOrderOnlineMaintenanceListModal.vue";
import { ajaxGetDictItems } from "@/api/api";

//高级查询modal需要参数
const superQueryFieldList = [
  {
    value: "processType",
    text: "工单类型",
    type: "string"
  },
  {
    value: "productionno",
    text: "生产工单",
    type: "string"
  },
  {
    value: "processbillno",
    text: "工序工单",
    type: "string"
  },
  {
    value: "processTwoname",
    text: "二级工序",
    type: "string"
  },
  {
    value: "lineno",
    text: "线体",
    type: "string"
  },
  {
    value: "productcode",
    text: "产品编码",
    type: "string"
  },
  {
    value: "productname",
    text: "产品名称",
    type: "string"
  },
  {
    value: "billnoStatus",
    text: "工单状态",
    type: "string"
  },
  {
    value: "qistate",
    text: "物料齐套状态",
    type: "string"
  },
  {
    value: "starttime",
    text: "计划开始时间",
    type: "string"
  },
  {
    value: "insertStatas",
    text: "插单上线审批状态",
    type: "string"
  },
  {
    value: "completiontime",
    text: "计划完成时间",
    type: "string"
  },
  {
    value: "schedule",
    text: "完成进度",
    type: "string"
  }
];
export default {
  components: {
    JSuperQuery,
    MesOrderOnlineMaintenanceListModal,
    JeecgListMixin
  },
  data() {
    return {
      size: "large",
      labelCol: {
        span: 4,
        offset: 2
      },
      data: [],
      filtrateData: [],
      // selectData: [],
      title: "",
      // 表头
      columns: [],
      //列设置
      settingColumns: [],
      //列定义
      defColumns: [
        {
          title: "序号",
          dataIndex: "1",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function(t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: "单据编号",
          align: "center",
          dataIndex: "receiptNumber"
        },
        {
          title: "送修日期",
          align: "center",
          dataIndex: "sendRepairDateParam"
        },
        {
          title: "送修线体",
          align: "center",
          dataIndex: "linename"
        },
        {
          title: "生产工单",
          align: "center",
          dataIndex: "productionBillno"
        },
        {
          title: "工序工单",
          align: "center",
          dataIndex: "processBillno"
        },
        {
          title: "SN/PN",
          align: "center",
          dataIndex: "snPn"
        },
        {
          title: "优先级",
          align: "center",
          dataIndex: "priority"
        },
        {
          title: "产品编码",
          align: "center",
          dataIndex: "mcode"
        },
        {
          title: "产品名称",
          align: "center",
          dataIndex: "mname"
        },
        {
          title: "单据类型",
          align: "center",
          dataIndex: "2" //------------
        },
        {
          title: "不良组名称",
          align: "center",
          dataIndex: "3"
        },
        {
          title: "缺陷名称",
          align: "center",
          dataIndex: "4"
        },
        {
          title: "所属部门",
          align: "center",
          dataIndex: "5"
        },
        {
          title: "状态",
          align: "center",
          dataIndex: "status"
        },
        {
          title: "状态备注",
          align: "center",
          dataIndex: "statusRemark"
        },
        {
          title: "送修人",
          align: "center",
          dataIndex: "sender"
        }
      ],
      selectedRowKeys: [],
      bordered: true,
      // loading: {
      //   delay: 2000,
      //   spinning: true
      // },
      url: {
        // 获取分页数据
        list: "/mes-manufacture/mfOnlineRepairTask/list",
        // 删除
        deleteList: "/mes-manufacture/mfOnlineRepairTask/"
      },
      getlistformdata: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0 // 总页数
      },
      visible: false,
      getDefect: [],
      active: true,
      show: {
        color: "#6a8ceb",
        "border-color": "#6a8ceb"
      },
      rowKey: ''

    };
  },
  created() {
    this.getlist();
    this.initColumns();
  },
  computed: {},
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000);
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter(item => {
        if (item.key == "rowIndex" || item.dataIndex == "action") {
          return true;
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true;
        }
        return false;
      });
      this.columns = cols;
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
      var key = this.$route.name + ":colsettings";
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function(item, i, array) {
          allSettingColumns.push(item.dataIndex);
        });
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter(item => {
          if (item.key == "rowIndex" || item.dataIndex == "action") {
            return true;
          }
          if (colSettings.includes(item.dataIndex)) {
            return true;
          }
          return false;
        });
        this.columns = cols;
      }
    },

    // 按钮选中
    defBtnPitch(vnode) {
      // console.log(vnode)
      var selectData = [];
      this.filtrateData.forEach(item => {
        if (item.status == vnode) {
          selectData.push(item);
        }
      });
      this.data = selectData;
      if (vnode == "送修中") {
        this.active = true;
      }
    },

    // 单据状态按钮点击
    btnClick(e) {
      this.active = false;
      this.defBtnPitch(e.target.outerText);
    },

    // 选中时的回调
    // rowKey(record){
    //   // console.log(record)
    //   const rk = []
    //   record.forEach(item=>{
    //     rk.push(item.id)
    //   })
    //   console.log(rk)
    //   return rk
    // },
    onSelect(){
      console.log(2222222)
    },

    // 删除按钮
    confirmDelet() {
      // var ids = this.id  // 需要传选中数据的id
      deleteAction(this.url.deleteList + `${ids}`).then(res => {
        if (res.code == 0) {
          this.$message.success("删除成功");
        } else {
          this.$message.warning(res.msg);
        }
      });
    },

    // 弹窗显示
    handleAdd() {
      this.$refs.reference.visible = true;
    },
    // 编辑
    // edit(){
    //   this.$refs.reference.visible=true
    // },

    SendATransfer() {},
    // 获取分页列表
    getlist() {
      const fordata = {
        limit: this.getlistformdata.pageSize,
        pageNo: this.getlistformdata.current
      };
      getAction(this.url.list, fordata).then(res => {
        if (res.code == 0) {
          // console.log(res.data.records);
          // 字典转化
          const status = "mes_MesOrderOnlineMaintenanceList_status";
          const data = res.data.records;
          const defSelect = [];
          ajaxGetDictItems(status).then(res => {
            if (res.code == 0) {
              // console.log(res);
              res.data.forEach(item => {
                data.forEach(el => {
                  if (el.status == 0) {
                    defSelect.push(el);
                  }
                  if (el.status == item.value) {
                    el.status = item.text;
                  }
                  this.rowKey = el.id
                });
              });
            } else {
              console.log(res.msg);
            }
          });
          this.data = defSelect;
          console.log(this.data);
          this.filtrateData = data;
        } else {
          // this.loading.spinning = false;
          this.$message.warning(res);
        }
      });
      // this.loading.spinning = false;
    },


    onClearSelected() {
      this.selectedRowKeys = [];
    }
  },
  computed: {}
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>